<!--
 * @Date: 2024-11-25 16:24:01
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-07 11:27:11
 * @Description: 
-->
<template>
  <div :class="rowClass" :style="rowStyles">
    <div class="input-col">
      <span class="col-label" v-show="rowState.leftLabel">{{ rowState.leftLabel }}</span>
      <div class="col-inner">
        <el-input-number
          v-model="rowState.v1"
          :max="100"
          @change="emits('update:modelValue', [rowState.v1, rowState.v2])"
        >
        </el-input-number>
      </div>
    </div>
    <div class="input-col">
      <span class="col-label" v-show="rowState.rightLabel">{{ rowState.rightLabel }}</span>
      <div class="col-inner">
        <el-input-number
          v-model="rowState.v2"
          :max="100"
          @change="emits('update:modelValue', [rowState.v1, rowState.v2])"
        >
        </el-input-number>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, useAttrs } from 'vue';

const emits = defineEmits(["update:modelValue"]);

const attrs = useAttrs();

const props = defineProps({
  schema: { type: Object },
  config: { type: Object },
  modelValue: { type: Array, default: [] },
  checkedNode: { type: Object },
})

const rowState = reactive({
  v1: props.modelValue[0],
  v2: props.modelValue[1],
  inline: false,
  ...attrs
})
const rowClass = computed(() => {
  return {
    'input-rows': true,
    'rows-inline': rowState.inline,
  }
})
const rowStyles = computed(() => {
  return {
    display: rowState.inline ? 'flex' : '',
  }
})

console.log('modelValue', { props, attrs })

</script>

<style lang="scss" scoped>
.input-rows {
  .input-col {
    display: flex;
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
    .col-label {
      margin-right: 8px;
    }
    .col-inner {
      flex: 1;
    }
  }
  &.rows-inline {
    .input-col {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>